<template>
<div class="sub-page">
    <el-form class="form-encrypt" ref="form" size="mini" :model="form" label-position="top" label-width="80px">
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="加密 Or 解密">
                    <el-select v-model="cipher_type_value" placeholder="请选择">
                        <el-option
                            v-for="item in cipher_type"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="算法类型">
                    <el-select v-model="cipher_method_value" placeholder="请选择">
                        <el-option
                            v-for="item in cipher_method"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            :disabled="item.disabled">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="24">
                <el-form-item label="输入" prop="plain">
                    <el-input v-model="form.input" type="textarea" style=""></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-form-item label="密钥">
                    <el-input v-model="form.key"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row v-if="cipher_method_value === 'aes-128-gcm' && cipher_type_value === 'encrypt'">
            <el-col :span="24">
                <el-form-item label="随机值">
                    <el-input v-model="form.nonce"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row v-if="cipher_method_value === 'aes-128-gcm'">
            <el-col :span="24">
                <el-form-item label="附加认证信息">
                    <el-input v-model="form.aad"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row v-if="cipher_method_value === 'aes-128-cbc'">
            <el-col :span="24">
                <el-form-item label="初始化向量">
                    <el-input v-model="form.iv"></el-input>
                </el-form-item>
            </el-col>
        </el-row>

        <el-row :space="240">
        <el-button type="primary" @click="encrypt" icon="el-icon-lock" :disabled="!(cipher_type_value==='encrypt')">加密</el-button>
        <el-button type="primary" @click="decrypt" icon="el-icon-unlock" :disabled="!(cipher_type_value==='decrypt')">解密</el-button>
        </el-row>
        <el-row style="margin-top: 40px;">
            <el-col :span="24">
                <el-form-item label="输出">
                    <el-input v-model="output" type="textarea" :autosize="{ minRows: 10, maxRows: 20}"></el-input>
                </el-form-item>
            </el-col>
        </el-row>

    </el-form>
</div>
</template>


<script>
import request from "@/request/index";

export default {
    data() {
        return {
            form: {
                input: 'hello world',
                key: '1c4586d114b421a7bf52179ccf2fcfe2',
                nonce: '756e69717565206e6f6e636521212121',
                iv: "756e69717565206e6f6e636521212121",
                aad: 'tian'
            },
            output: '',
            cipher_method: [
                {
                    value: 'aes-128-ecb',
                    label: 'aes-128-ecb',
                    disabled: true,
                },
                {
                    value: 'aes-128-cbc',
                    label: 'aes-128-cbc',
                },
                {
                    value: 'aes-128-gcm',
                    label: 'aes-128-gcm',
                }
            ],

            cipher_method_value: 'aes-128-gcm',

            cipher_type: [
                { value: 'encrypt', lable: 'encrypt' },
                { value: 'decrypt', lable: 'decrypt' }
            ],

            cipher_type_value: 'encrypt',
        }
    },

    methods: {
        encrypt() {
            console.log("encrypt==", this.form);
            let data = {};
            if (this.cipher_method_value === 'aes-128-cbc') {
                const { aad, nonce, ...obj } = this.form;
                data = obj;
            } else if (this.cipher_method_value == 'aes-128-gcm') {
                const { iv, ...obj } = this.form;
                data = obj;
            }
            request({
                url: '/encryptbyaes128gcm',
                method: 'POST',
                data,
            }).then((res) => {
                this.output = res;
                console.log("res==", res);
            })
        },

        decrypt() {
            console.log("encrypt==", this.form);
            let data = {};
            if (this.cipher_method_value === 'aes-128-cbc') {
                const { aad, nonce, ...obj } = this.form;
                data = obj;
            } else if (this.cipher_method_value == 'aes-128-gcm') {
                const { iv, ...obj } = this.form;
                data = obj;
            }
            request({
                url: '/decryptbyaes128gcm',
                method: 'POST',
                data,
            }).then((res) => {
                this.output = res;
                console.log("res==", res);
            })
        }
    }
}
</script>
<style scoped lang="scss">
.sub-page {
    width: 100%;
    display: flex;
    justify-content: center;
}
.sub-page .form-encrypt {
    width: 600px;
}
.form-encrypt .el-select {
    width: 100%;
}
.form-encrypt.el-form--label-top .el-form-item__label {
    padding-bottom: 2px;
}
</style>